<!--**
* 定义视图元素
* @usage <l5-view></l5-view>
* @author lonphy
* @version 1.0
*-->
<script src="/lib/core/View.js" charset="UTF-8"></script>
<script>
    document.registerElement('l5-view', {
        prototype: Object.create(HTMLElement.prototype, {
            open: {
                value: function () {
                    this.classList.add('show');
                }
            },
            close: {
                value: function () {
                    this.classList.remove('show');
                }
            },
            createdCallback: {
                value: function () {
                    var tpls = document.getElementById('l5-view').import;
                    var tpl = tpls.getElementById('template');
                    var clone = document.importNode(tpl.content, true);
                    this.createShadowRoot().appendChild(clone);
                }
            },
            attachedCallback: {
                value: function () {
                    // TODO: 初始化视图
                    var module = this.id;
                    console.log(module);
                }
            },
            detachedCallback: {
                value: function () {
                    console.log('delete');
                }
            },
            attributeChangedCallback: {
                value: function (attrName, oldVal, newVal) {
                    console.log(attrName + ' changed from ' + oldVal + ' to ' + newVal);
                }
            }
        })
    });
</script>
<template id="template">
<style>
@
-webkit-keyframes show /* Safari 和 Chrome */ { 100% {
	opacity: 1;
	z-index: 1;
	-webkit-transform: rotateX(0deg);
}

}
@
-webkit-keyframes hide /* Safari 和 Chrome */ { 100% {
	opacity: .4;
	-webkit-transform: rotateX(-90deg);
	z-index: -1;
}

}
:host {
	position: absolute;
	width: 90%;
	height: calc(100% -   80px);
	background: #fff;
	opacity: .5;
	left: 5%;
	top: 80px;
	z-index: 0;
	-webkit-transform: rotateX(90deg);
	-webkit-transform-origin: bottom;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-animation: hide .3s linear;
}

@
-webkit-keyframes animate-progress { 100% {
	background-position: 16em 0px;
}

}
#mask {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
	transition: all linear .5s;
}

#progress {
	position: absolute;
	top: 50%;
	left: calc(50% -   15em);
	width: 30em;
	height: 2.4em;
	background-color: transparent;
	background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgb(80, 23, 9)
		33%, rgb(207, 59, 22) 66%, transparent 66%),
		-webkit-linear-gradient(top, rgba(255, 255, 255, .25),
		rgba(0, 0, 0, .25));
	background-size: 8em 2.4em, 100% 100%;
	border-radius: .5em;
	box-shadow: 0 .2em .4em rgba(0, 0, 0, 0.6);
	-webkit-animation: animate-progress 2s linear infinite;
}

#progress:before {
	content: "wait please..";
	position: absolute;
	color: #473F3F;
	width: 100%;
	height: 100%;
	line-height: 2em;
	text-align: center;
	font-size: 1.2em;
	text-shadow: 0 0 2px #666, 0 0 .5em #fff;
}

:host (.loading ) #mask {
	display: block;
}

:host (.show:host ) {
	-webkit-animation: show ease-in both .6s .1s;
	border-radius: 5px;
	box-shadow: 2px 2px 16px 8px rgba(0, 0, 0, .2);
}

:host (:host ) {
	box-sizing: border-box;
	padding: 1em !important;
}
</style>
<div id="mask">
	<div id="progress"></div>
</div>
<content select='h2'></content> <content select=":not(h2)"></content> </template>